<template>
  <div :style="styleLess">
    <div v-if="isEdit">
      <el-upload
        class="avatar-uploader"
        :style="styleLess"
        :accept="accept"
        :action="action"
        :list-type="listType"
        :show-file-list="showFileList"
        :limit="limit ? parseInt(limit) : null"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :on-remove="handleRemove"
        :on-preview="handlePictureCardPreview"
        :headers="headers"
        :disabled="upKey"
        :file-list="fileList"
      >
        <div
          class="img-outer"
          v-if="dialogImageUrl && !listType"
        >
          <div class="avatar">
            <img
              :src="dialogImageUrl"
              class="avatar"
              :style="styleLess"
            />
          </div>
          <div class="img-tool">
            <el-button
              type="text"
              icon="el-icon-zoom-in"
              style="font-size: 23px;color: #fff;"
              @click="preview"
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              style="font-size: 23px;color: #fff;margin-left: 15px"
              @click="delImg"
            ></el-button>
          </div>
          <label class="img-tool-label"><i class="el-icon-check img-tool-label-success"></i></label>
        </div>
        <i
          class="el-icon-plus"
          v-if="listType && !title"
        ></i>
        <i
          v-if="!listType && !dialogImageUrl && !title"
          class="el-icon-plus avatar-uploader-icon"
        ></i>
        <span
          class="avatar-uploader-icon"
          v-if="title && !dialogImageUrl && !listType"
        >{{title}}</span>
      </el-upload>
      <div class="view-dv">
        <el-image
          ref="showImg"
          :src="dialogImageUrl"
          :preview-src-list="[dialogImageUrl]"
        >
        </el-image>
      </div>
    </div>
    <!-- <el-dialog :visible.sync="dialogVisible">
      <img
        width="100%"
        :src="dialogImageUrl"
        alt=""
      >
    </el-dialog> -->
    <template v-if="!isEdit">
      <div
        v-if="!multiple"
        class="see-img"
        :style="styleLess"
      >
        <el-image
          :style="styleLess"
          :src="dialogImageUrl"
          :preview-src-list="[dialogImageUrl]"
        >
          <div
            slot="error"
            class="image-slot"
          >
            <img
              style="width:100%; height: 100%"
              src="@/assets/images/errorImage.png"
            />
          </div>
        </el-image>
      </div>
      <div
        v-else
        class="see-img"
        :style="styleLess"
        v-for="(item,index) in files"
        :key="index"
      >
        <el-image
          :style="styleLess"
          :src="item.url"
          :preview-src-list="[item.url]"
        >
          <div
            slot="error"
            class="image-slot"
          >
            <img
              style="width:100%; height: 100%"
              src="@/assets/images/errorImage.png"
            />
          </div>
        </el-image>
      </div>
    </template>

  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: "UploadFile",
  props: {
    isEdit: {
      type: Boolean,
      default: true,
    },
    action: {
      type: String,
      default: "/gateway/file-server/file/upload/single",
    },
    accept: {
      type: String,
      default: ".jpg,.png,.jpeg",
    },
    headers: {
      type: Object,
      default: () => {
        return { Authorization: `bearer ${getToken()}` };
      },
    },
    sizeVisible: {
      type: Boolean,
      defalut: true,
    },
    size: {
      type: Number,
      defalut: 5,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: [Number, String],
      default: null,
    },
    files: {
      type: [Array, String],
      default: "",
    },
    styleLess: {
      type: String,
      default: "width: 178px;height: 178px;",
    },
    title: {
      type: String,
      default: "",
    },
  },
  watch: {
    multiple: {
      handler(val) {
        if (val) {
          this.listType = "picture-card";
          this.showFileList = true;
        } else {
          this.listType = null;
          this.showFileList = false;
        }
      },
      immediate: true,
    },
    files: {
      handler(val) {
        if (Array.isArray(val)) {
          this.fileList = val;
        } else {
          this.dialogImageUrl = val;
          if (this.startCom === 0) {
            this.upKey = this.dialogImageUrl ? true : false;
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      upKey: false,
      dialogVisible: false,
      dialogImageUrl: "",
      showFileList: false,
      listType: null,
      fileList: [],
      fileDatalist: [],
      startCom: 0,
    };
  },
  methods: {
    // 在上传之前的处理
    beforeAvatarUpload(file) {
      const name = file.name;
      const n = name.lastIndexOf(".");
      const strName = name.substr(n);
      const isLt2M = file.size / 1024 / 1024 < this.size;
      const x = this.accept.indexOf(strName);
      if (x === -1) {
        this.$message.error("上传的文件不支持");
        return false;
      }
      if (this.sizeVisible) {
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 5MB!");
          return false;
        }
      }
      return true;
    },
    // 上传成功之后的处理
    handleAvatarSuccess(res, file) {
      if (!this.multiple) {
        this.dialogImageUrl = URL.createObjectURL(file.raw);
        this.upKey = true;
        this.$emit("update:files", res.data.fileUrl);
        this.$emit("imgData", res.data.fileUrl);
        this.$emit("file-data", res.data);
      } else {
        const arr = [...this.fileList];
        const fileData = [...this.fileDatalist];
        arr.push({ url: res.data.fileUrl });
        fileData.push(res.data);
        this.fileList = arr;
        this.fileDatalist = fileData;
        this.$emit("update:files", arr);
        this.$emit("imgData", arr);
        this.$emit("file-data", fileData);
      }
    },
    // 点击删除的功能
    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.$emit("update:files", fileList);
      this.$emit("imgData", fileList);
      this.$emit("file-data", fileList);
    },
    // 查看图片的功能
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.$refs.showImg.clickHandler();
      this.dialogVisible = true;
    },
    // 预览
    preview() {
      this.$refs.showImg.clickHandler();
    },
    // 删除图片的功能
    delImg() {
      this.startCom++;
      this.dialogImageUrl = "";
      this.$emit("update:files", "");
      this.$emit("imgData", "");
      this.$emit("file-data", { fileUrl: "", uuid: "" });
      setTimeout(() => {
        this.upKey = false;
      }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
.img-outer {
  position: relative;
  &:hover {
    .img-tool-label {
      display: none;
    }
  }
  .img-tool {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
  }
}
.img-tool-label {
  position: absolute;
  right: -15px;
  top: -6px;
  width: 40px;
  height: 24px;
  background: #13ce66;
  text-align: center;
  transform: rotate(45deg);
  box-shadow: 0 0 1pc 1px rgb(0 0 0 / 20%);
  .img-tool-label-success {
    font-size: 12px;
    margin-top: 11px;
    transform: rotate(-45deg);
    color: #fff;
  }
}
.avatar-uploader-icon {
  display: block;
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
}
.avatar-uploader /deep/ .el-upload--picture-card {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-uploader /deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 100%;
  height: 100%;
}
.avatar-uploader /deep/ .el-upload {
  width: 100%;
  height: 100%;
}
.view-dv {
  width: 0px;
  height: 0px;
  overflow: hidden;
}
.image-slot {
  width: 100%;
  height: 100%;
}
.see-img {
  border: 1px dashed #f7f7f7;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 15px;
  margin-bottom: 15px;
}
</style>
